import { Component } from 'react';
import './activity.scss'
const data = [
    {
        label: '线上活动',
        name: '线上活动',
        checked: false
    },
    {
        label: '推广类',
        name: '推广类',
        checked: false
    },
    {
        label: '线下活动',
        name: '线下活动',
        checked: false
    },
    {
        label: '品牌介绍',
        name: '品牌介绍',
        checked: false
    }
]
class Activity extends Component {
    // constructor(props) {
    //     super(props);
    // }
    state = {
        // sex: '1', // 男
        activityName: "前端前景技术发展交流",
        city: "shanghai",// 城市
        beginTime: "",// 开始 时间
        finishTime: "",// 结束时间
        activityPhone: "",// 报名电话
        occupation: "",// 目前职业
        describe: "",// 描述
        sponsor: "",// 赞助商
        isShowSwitch: false
    }
    Occupation = (e) => {
        this.setState({
            occupation: e.target.value
        })
    }
    ActivityPhone = (e) => {
        this.setState({
            activityPhone: e.target.value
        })
    }
    handleInput = (e, index) => {
        if (e.target.type === 'checkbox') {
            data[index].checked = !data[index].checked
        }
        let name = e.target.name
        let value = e.target.value
        this.setState({
            [name]: value
        })
        // console.log('checkbox', data, this.state)
    }
    handleSelectCity = (e) => {
        // console.log('city', e.target.value, this.state)
        this.setState({
            city: e.target.value
        })
    }
    Sponsor = (e) => {
        this.setState({
            sponsor: e.target.value
        })
    }
    Describe = (e) => {
        this.setState({
            describe: e.target.value
        })
    }
    BeginTime = (e) => {
        this.setState({
            beginTime: e.target.value
        })
    }
    FinishTime = (e) => {
        this.setState({
            finishTime: e.target.value
        })
    }
    ChangeSwicth = () => {
        // let res = this.state.isShowSwitch
        // console.log(res)
        if (!this.state.isShowSwitch) {
            this.setState({
                isShowSwitch: true,
            })
        } else {
            this.setState({
                isShowSwitch: false,
            })
        }
        // console.log(this.state.isShowSwitch)
    }
    tijiao = (e) => {
        e.preventDefault()
        console.log(1111, this.state);
    }
    chongzhi = () => {
        
        this.setState({
            activityName: "前端前景技术发展交流",
            city: "shanghai",// 城市
            beginTime: "",// 开始 时间
            finishTime: "",// 结束时间
            activityPhone: "",// 报名电话
            occupation: "",// 目前职业
            describe: "",// 描述
            sponsor: "",// 赞助商
            isShowSwitch: false
        })
    }
    render() {
        return (<>
            <h1>活动</h1>
            <form className='activity'>
                {
                    // 活动名称
                }
                <div className='activity_name'>
                    <span>活动名称</span>
                    <input type="text" disabled value={this.state.activityName} />
                </div>
                {
                    // 城市
                }
                <div className='activity_city'>
                    <span>城市</span>
                    <select name="" id="" className='activity_city_select' value={this.state.city} onChange={this.handleSelectCity}>
                        <option value="beijing">北京</option>
                        <option value="zhangjakou">张家口</option>
                        <option value="shanghai">上海</option>
                        <option value="tianjin">天津</option>
                    </select>
                </div>
                {
                    // 日期
                }
                <div className='activity_date'>
                    <span>日期</span>
                    <div className='activity_date_inputs'>
                        <input type="date" value={this.state.beginTime} onChange={this.state.BeginTime} />
                        <span>-</span>
                        <input type="time" value={this.state.finishTime} onChange={this.state.FinishTime} />
                    </div>
                </div>
                {
                    // 报名电话
                }
                <div className='activity_phone'>
                    <span>报名电话</span>
                    <input type="text" value={this.state.activityPhone} onChange={this.ActivityPhone} />
                </div>
                {
                    // 允许电话沟通
                }
                <div className="acti-switch">
                    <span> 电话沟通 </span>
                    <div
                        onClick={this.ChangeSwicth}
                        className={!this.state.isShowSwitch ? 'isShow2' : 'isShow'}
                    >
                        <div></div>
                    </div>
                </div>
                {
                    // 目前职业
                }
                <div className='occupation'>
                    <span>目前职业</span>
                    <div className='occupation_inputs'>
                        <input type="text" value={this.state.occupation} onChange={this.Occupation} />
                    </div>
                </div>
                {
                    // 活动类型
                }
                <div className='type'>
                    <span>活动类型</span>
                    <div className='type_inputs'>
                        {
                            data.map((item, key) => {
                                return (
                                    <label key={key} className='type_inputs_label'>
                                        <input type="checkbox" checked={item.checked} name={item.name} onChange={(e) => this.handleInput(e, key)} />
                                        <span>{item.label}</span>
                                    </label>
                                )
                            })
                        }
                    </div>
                </div>
                {
                    // 活动赞助商
                }
                <div className='sponsor'>
                    <span>活动赞助商</span>
                    <div className='sponsor_inputs'>
                        <label>
                            <input type="radio" value='1' checked={this.state.sponsor === '1'} onChange={this.Sponsor} /> 淘宝
                        </label>
                        <label>
                            <input type="radio" value='2' checked={this.state.sponsor === '2'} onChange={this.Sponsor} /> 京东
                        </label>
                    </div>
                </div>
                {
                    // 描述
                }
                <div className='describe'>
                    <span>描述</span>
                    <div className='describe_inputs'>
                        <textarea className='describe_inputs_textarea' value={this.state.describe} onChange={this.Describe}></textarea>
                    </div>
                </div>
                {
                    // 按钮
                }
                <div className='button'>
                    <span></span>
                    <div className='button_inputs'>
                        <button className='tijiao' onClick={this.tijiao}>提交</button>
                        <button onClick={this.chongzhi}>重置</button>
                    </div>
                </div>
            </form>
        </>);
    }
}

export default Activity;